<template>
  <section class="send">
<div id='popContainer' v-show="pop"></div>
    <div id="canvascontent" @touchmove.prevent>
      <div class="send-bgimg">
        <img :src=sendList.image alt="">
      </div>
      <div class="send-wrap clearfix">
        <p class="send-wrap-date">{{sendList.datetime}}</p>
        <div class="line">{{sendList.username}}</div>
          <p class="text1">{{sendList.content}}</p>
        <h1 class="index-title">{{sendList.title}}</h1>
      </div>
    </div>
    <div class="makebenediction">
      <div class="makebenediction-wrap" @click="share">
        发送给好友
      </div>
    </div>
    <div id="modal" class="modal" v-show="pop">
      <div class="wrap">
        <div id="canvas1" v-show="pp"></div>
        <img :src="url" id="canvasImage" alt="">
        <p>长按保存图片.分享给您的好友</p>
        <span class="close-btn" @click="pop=!pop"></span>
      </div>
    </div>
  </section>
</template>
<script>
// import store from '../store/index.js'
// import {html2canvas} from '../../node_modules/html2canvas/dist/html2canvas.min.js'
export default {
  components:{

  },
  data(){
    return{
      sendList:{},
      pop:false,
      url:'',
      pp:false
    }
  },
  methods:{
    //页面数据
    sendlist(){
      this.$http.get('/home/buddhism/fasong').then(response => {
        if(response.msg  = "SUCCESS"){
          this.$store.commit('updateLoadingStatus', {isLoading: false})
          this.sendList = response.data.data;
        }
      })
    },
    share(){
      let _this = this;
      this.$nextTick(()=>{
         var content = document.getElementById('canvascontent');
         html2canvas(content,{
            onrendered: function(canvas) { 
                //添加属性 
                canvas.setAttribute('id','thecanvas');
                document.getElementById('canvas1').innerHTML = ''; 
                document.getElementById('canvas1').appendChild(canvas); 
                _this.pop = true;
                var imgsc = document.getElementById('thecanvas').toDataURL("image/png");
                var image = document.getElementById('canvasImage');
                // canvas.width  = canvasImage.width;
                // canvas.height = canvasImage.height;
                document.getElementById('canvasImage').src = imgsc;
                this.pp = true;
            }           
         })
      })
    }
  },
  created(){
    //调用方法
    this.sendlist();
  }
}
</script>

<style lang="less">
.send{
  padding:  88px 30px 130px 30px;
  // width: 100%;
  .send-bgimg{
    width:100%;
    height: 559px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .send-wrap{
    background: url('../assets/bor.png') no-repeat;
    width: 100%;
    height: 449px;
    background-size: 100% 100%;
    margin-bottom: 50px;
    .send-wrap-date{
       writing-mode: vertical-lr;
       float: left;
       font-size: 20px;
       color:#333;
       width:82px;
       line-height: 95px;
       height: 100%;
       text-align: center;
       border-right: 1px solid #333;
       margin-right: 82px;
       letter-spacing: 1px
    }
    .line{
      background: url('../assets/yin.png') no-repeat;
      background-size: 100% 100%;
      width: 40px;
      /* height: 52px; */
      float: left;
      position: relative;
      color: #fff;
      margin-top: 270px;
      text-align: center;
      min-height: 82px;
      max-height:160px;
      padding: 15px 0;
      line-height: 1.2;
    }
    .line::before{
      content: '';
      width: 2px;
      height: 60px;
      background-color: #333;
      position: absolute;
      top: -70px;
      left: 18px;
      }
    // .send-wrap-list {

      .text1{
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
      float: left;
      font-size: 28px;
      color: #333;
      line-height: 41px;
      text-align: center;
      padding-top: 37px;
      margin-right: 24px;
      border-right: 1px solid #333;
      // text-align: left;
      columns: 120px 3;
      -webkit-columns: 140px 3;
      height: 305px;
      -moz-column-gap: 5px;
      -webkit-column-rule-style: solid;
      -ms-writing-mode: tb-lr;
      writing-mode:vertical-rl;
      column-rule-style: solid;
      width: 300px;
      }
    // }
    .index-title{
       color: #B38A43;
      //  writing-mode: vertical-rl;
       writing-mode: vertical-lr;
       border-left: 1px solid  #333;
       height: 100%;
       text-align: center;
       width: 147px;
       line-height: 147px;
       float: left;
       font-size: 46px;
    }
    .aa{
      p{
        writing-mode: vertical-lr;
      }
    }
  }
  .makebenediction{
    margin: 0px 190px;
    color: #fff;
    background-color: #CD9D33;
    border-radius: 50px;
    .makebenediction-wrap{
    font-size: 28px;
    height:90px;
    line-height: 90px;
    text-align: center;
      a{
       text-decoration:none !important;
       display:block;
       color: inherit;
      }
    }
  }
  #thecanvas{
    width: 100%;
    // height: 430.6px;
  }
  .modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    .wrap{
      height: 950px;
      position: absolute;
      top: -22%;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      text-align: center;
      font-size: 28px;
      color: #fff;
      .close-btn{
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: -25%;
        left: 50%;
        margin-left: -40px;
        display: block;
        background: url() center/cover no-repeat;
      }

    }
  }
}
// @media (min-width:321px) and (max-width:375px){
//   .send .send-wrap .text1{
//     width: 300px;
//   }
// }
// @media (min-width:376px) and (max-width:414px){
//   .send .send-wrap .text1{
//     width: 450px;
//   }
// }
// @media (min-width:412px) and (max-width:425px){
//   .send .send-wrap .text1{
//     width: 300px;
//   }
// }
#popContainer{
  // margin: 0 40px;
  // height:80%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background: rgba(0,0,0,0.3);
}


</style>
